<!DOCTYPE html>
<html>

<head>
	<title> Chat </title>

	<style>
		body {
			margin: 0;
			padding-bottom: 3rem;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		}

		#form {
			background: rgba(0, 0, 0, 0.15);
			padding: 0.25rem;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			height: 3rem;
			box-sizing: border-box;
			backdrop-filter: blur(10px);
		}

		#input {
			border: none;
			padding: 0 1rem;
			flex-grow: 1;
			border-radius: 2rem;
			margin: 0.25rem;
		}

		#input:focus {
			outline: none;
		}

		#form>button {
			background: #333;
			border: none;
			padding: 0 1rem;
			margin: 0.25rem;
			border-radius: 3px;
			outline: none;
			color: #fff;
		}

		#messages {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		#messages>li {
			padding: 0.5rem 1rem;
		}

		#messages>li:nth-child(odd) {
			background: #efefef;
		}

	</style>

</head>


<body>
	<ul id="messages"></ul>
	<form id="form" action="">
		<input id="nickname" />
		<input id="input" autocomplete="off" />
		<button>Send</button>
	</form>

	<script src="/socket.io/socket.io.js"></script>
	<script>
		var socket = io();
		var name = 'guest';

		const messages = document.getElementById('messages');
		const form = document.getElementById('form');
		const input = document.getElementById('input');
		const nickname = document.getElementById('nickname');

		nickname.value = name;

		nickname.addEventListener('input', (e) => {
			name = e.target.value;

		})

		form.addEventListener('submit', (e) => {
			e.preventDefault();
			if (input.value) {
				socket.emit('chat message', {
					name: name,
					msg: input.value,
				});
				input.value = '';
			}
		})

		socket.on('chat message', function (msg) {
			var item = document.createElement('li');
			item.textContent = msg.name + ": " + msg.msg;
			messages.appendChild(item);
			window.scrollTo(0, document.body.scrollHeight);
		})

	</script>
</body>



</html>
